<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CUBE私端</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            background: url("images/01.png") no-repeat center center;
            background-size: 100% 100%;
            height: 1100px;
        }

        a {
            text-decoration: none;
            color: white;
            font-size: 30px;
            -webkit-text-stroke: 2px black;
            font-weight: 900;

        }




        .item {
            width: 40%;
            height: 120px;
            /* position: absolute; */
            border: 1px solid #fff;
            /* z-index: 100; */
            text-align: center;
            background-color: #999;
            line-height: 120px;
            border-radius: 20px;
            opacity: .8;
        }

        .item:hover {
            /* border: 1px solid white; */
            /* background-color: #999; */
        }

        .list1 {

            transform: translateX(-50%);
            margin-left: 50%;

        }

        .list2 {
            float: left;
            margin-left: 2%;

        }

        .list3 {
            margin-top: 2px;
            transform: translateX(-50%);
            margin-left: 50%;
        }

        .list4 {
            width: 28%;
            float: left;

        }

        .list5 {
            width: 28%;
            float: right;

        }

        #div1 {
            width: 100%;
            height: 120px;
        }

        @media only screen and (max-width: 500px) {
            #div1 {
                width: 100%;
                height: 262px;
            }

            body {
                width: 100%;
                background: url("images/02.png") no-repeat center center;
                background-size: 100% 100%;
                /* height: 1100px; */
            }

            a {
                text-decoration: none;
                color: red;
                font-size: 15px;
                -webkit-text-stroke: 0px rgb(213, 122, 122);
                font-weight: 900;

            }

            .item {
                width: 88%;
                height: 80px;
                /* position: absolute; */
                border: 1px solid #999;
                /* z-index: 100; */
                text-align: center;
                background-color: #999;
                line-height: 80px;
                border-radius: 15x;
                opacity: .8;
                margin-bottom: 5px;

            }

            .item:hover {}

            .list1 {

                transform: translateX(-50%);
                margin-left: 50%;

            }

            .list2 {
                transform: translateX(-50%);
                margin-left: 50%;

            }

            .list3 {

                transform: translateX(-50%);
                margin-left: 50%;
            }

            .list4 {
                /* width: 28%; */
                transform: translateX(-50%);
                margin-left: 50%;

            }

            .list5 {
                /* width: 28%; */
                transform: translateX(-7%);
                margin-left: 50%;

            }
        }


        body {
            /* display: flex; */
            /* justify-content: center; */
            /* align-items: center; */
            height: 100vh;
            /* 使用全屏高度显示 */
        }

        .time-text {

            font-size: 16px;
            font-weight: 700;
            width: 23%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
            margin: 0;
            margin-left: 2%;
            border-radius: 5px;
            color: #fff;

        }

        .max1 {
            width: 65%;
            margin: 0 auto;
            height: 50px;

        }

        .time-text1 {

            font-size: 22px;

            width: 23%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
            margin: 0;
            margin-left: 2%;
            border-radius: 5px;
            color: #000;

        }

        .max2 {
            width: 100%;
            text-align: center;
            font-weight: 700;
            color: rgb(165, 66, 190);
            font-size: 18px;

        }

        .max2 a {
            font-weight: 700;
            color: rgb(165, 66, 190);
            font-size: 20px;
        }

        .max3 {
            width: 100%;
            text-align: center;
            color: #2e89c2;
            font-size: 32px;

        }
    </style>

</head>

<body>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="max3">
        CUBE和超越端口

    </div>
    <div class="max3">
        已运行
    </div>
    <br>
    <!-- <img src="./images/1.gif" alt=""> -->
    <div class="max1">
        <div id="days" class="time-text"></div>
        <div id="hours" class="time-text"></div>
        <div id="minutes" class="time-text"></div>
        <div id="seconds" class="time-text"></div>
    </div>
    <div class="max1">
        <div class="time-text1">天</div>
        <div class="time-text1">时</div>
        <div class="time-text1">分</div>
        <div class="time-text1">秒</div>
    </div>

    <div class="max2">
        客服微信Lhy9991112
    </div><br>
    <div class="max2">
        <a href="http://111.229.95.82/">端口查询</a>
    </div>

    <br><br><br><br><br><br>





</body>
<script>
    function updateTime() {
        var now = new Date();

        var days = now.getDate();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        document.getElementById("days").innerHTML = days;
        document.getElementById("hours").innerHTML = hours;
        document.getElementById("minutes").innerHTML = minutes;
        document.getElementById("seconds").innerHTML = seconds;

        // 添加不同颜色方块背景
        document.getElementById("days").style.backgroundColor = "#FFC0CB"; // 粉红色
        document.getElementById("hours").style.backgroundColor = "#00BFFF"; // 天蓝色
        document.getElementById("minutes").style.backgroundColor = "#38a42a"; // 黄色
        document.getElementById("seconds").style.backgroundColor = "#FFA500"; // 橙色
    }

    setInterval(updateTime, 1000);
</script>

</html>